<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>爱心</title>
<style type="text/css">
	*{
/*		初始化页面元素内外边距*/
		margin:0;
		padding: 0;
	}
	body{
/*		弹性布局元素垂直水平居中*/
		display:flex;
		justify-content: center;
		align-items: center;
/*		占浏览器窗口高度占比*/
		height: 100vh;
		background: #000;
	}
	ul{
/*		相对位置*/
		position:relative;
		display: flex;
		height: 200px;
	}
	ul::after{
		content:'以我所长给予你最美丽温柔';
		wight:400px;
		position: absolute;
		top:0;
		left:50%;
		color: aqua;
		font-size: 30px;
		font-weight: 700;
		transform: translate(-50%,-400%);
	}
	li{
/*		定义下无序表点的大小 这里配合动画可变换不同形状的心*/
		width:20px;
		height: 20px;
		border-radius: 10px;
		margin: 0 10px;
	}
	li:nth-child(1){animation:love1 5s 0s infinite;background: red;}
	li:nth-child(2){animation:love2 5s 0.2s infinite;background: aqua;}
	li:nth-child(3){animation:love3 5s 0.4s infinite;background:darksalmon;}
	li:nth-child(4){animation:love4 5s 0.6s infinite;background:pink;}
	li:nth-child(5){animation:love5 5s 0.8s infinite;background:yellow;}
	li:nth-child(6){animation:love4 5s 1s infinite;background:pink;}
	li:nth-child(7){animation:love3 5s 1.2s infinite;background:darksalmon;}
	li:nth-child(8){animation:love2 5s 1.4s infinite;background:aqua;}
	li:nth-child(9){animation:love1 5s 1.6s infinite;background:red;}
/*	定义动画*/
	@keyframes love1{
		30%,50%{
			height:60px;
			transform: translateY(-30px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
	@keyframes love2{
		30%,50%{
			height:120px;
			transform: translateY(-60px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
	@keyframes love3{
		30%,50%{
			height:160px;
			transform: translateY(-75px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
	@keyframes love4{
		30%,50%{
			height:180px;
			transform: translateY(-60px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
	@keyframes love5{
		30%,50%{
			height:200px;
			transform: translateY(-45px);
		}
		70%,100%{
			height:20px;
			transform: translateY(0);
		}
	}
</style>
</head>

<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>
